<template>
  <div>
    <Description @register="register" class="mt-4" :labelStyle="{ width: '15em' }" />
    <a-button type="primary" @click="handleUploadClick"> 上传 </a-button>
    <AuditModal @register="registerModal" @success="handleSuccess" />
  </div>
</template>
<script lang="ts">
  import { defineComponent, ref } from 'vue';
  import { Upload } from 'ant-design-vue';
  import { useGlobSetting } from '/@/hooks/setting';
  import { Description, useDescription } from '/@/components/Description/index';
  import { useMessage } from '/@/hooks/web/useMessage';
  const { createMessage } = useMessage();
  const { info, success, warning, error } = createMessage;
  import { getApkDetailColumns } from './tableData';
  import { detailApkApi } from '/@/api/demo/system';
  import AuditModal from './AuditModal.vue';
  import { useModal } from '/@/components/Modal';

  export default defineComponent({
    name: 'ApkUpload',
    components: { Upload, Description, AuditModal },
    setup(props, { emit }) {
      const { uploadUrl } = useGlobSetting();
      let uploading = false;

      const [registerModal, callbackModal] = useModal();

      function handleChange(info: Recordable) {
        const file = info.file;
        const status = file?.status;
        const url = file?.response?.url;
        const name = file?.name;

        if (status === 'uploading') {
          if (!uploading) {
            emit('uploading', name);
            uploading = true;
          }
        } else if (status === 'done') {
          emit('done', name, url);
          uploading = false;
        } else if (status === 'error') {
          emit('error');
          uploading = false;
        }
      }

      function handleUploadClick() {
        callbackModal.openModal(true, {
          record: {},
          isUpdate: false,
        });
      }

      const detailInfo = ref<Recordable>({});
      function handleSuccess() {
        detailApkApi()
          .then((d) => {
            detailInfo.value = d;
          })
          .catch((err) => {
            error(err.message || '获取APK信息失败');
          });
      }

      handleSuccess();

      const [register] = useDescription({
        title: 'APK信息',
        data: detailInfo,
        schema: getApkDetailColumns(),
        column: 1,
        collapseOptions: { canExpand: true },
      });

      return {
        register,
        handleChange,
        uploadUrl,
        registerModal,
        handleSuccess,
        handleUploadClick,
      };
    },
  });
</script>
